<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="layui/css/global.css" media="all">
<link rel="stylesheet" href="layui/css/desktop.css" media="all">
<link  rel="stylesheet" href="layui/css/layer.css" media="all">
<link  rel="stylesheet" href="layui/css/laydate.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<div id="userd" class="container">
	<div class="container">
		<form class="form-inline  success" role="form">
			<div class="input-group">
				<span class="input-group-addon">用户名称</span> <input type="text"
					class="form-control" id="userName" placeholder="输入要查找的用户名称">

			</div>
			<button type="button" id="findUser" class="btn btn-primary">搜索</button>
			<button type="button" id="addUser" class="btn btn-primary">添加</button>
		</form>
	</div>


	<div class="table-responsive">
		<table class="table">
			<thead>
				<tr class="success">
					<td>序号</td>
					<td>用户</td>
					<td>密码</td>
					<td>联系方式</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr class="active" v-for="(item,index) in result">
					<td>{{index+1}}</td>
					<td>{{item.userName}}</td>
					<td>{{item.pwdword}}</td>
					<td>{{item.telephone}}</td>
					<td>{{item.sex}}</td>
					<td><a href="#" @click="editEvent(item.userId)"><i
							class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe61f;</i>修改</a>
						<a href="#" @click="delEvent(item.userId)"><i
							class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe61f;</i>删除</a></td>
				</tr>
			</tbody>
		</table>
		<div id="pagenav"></div>
		<!-- 分页组件 -->
	</div>
</div>
<script>
	//v-for="(item,index) in result"  for循环  index是列表的序列号,根据index显示页面   {{是占位符}}  #app是id选择器  用数组result显示for循环
	//"@"动态传值
	//创建一个新的Vue类
	// result随意命名,和上边的v-for对应 
	var app = new Vue({
		el : "#userd",
		data : {
			result : []
		}
	}

	);
	//app.result调用

	//查找用户信息
	var getUserList = function(curr) {
		$.ajax({
			type : "GET",
			dataType : "json",
			url : "/user/getlist",
			data : {
				pageNum : curr || 1,//分页的显示(当前页||第一页)
				pageSize : 5,
				userName : $("#userName").val()
			//向服务端传的参数，此处只是演示
			},
			success : function(msg) {
				app.result = msg.result;//msg.result服务器端传过来的数据    json对象 .result(page类的返回值)
				laypage({
					cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
					pages : msg.totalPage, //后台总页数
					first : true,
					last : true,
					curr : curr || 1, //当前页||第一页
					jump : function(obj, first) { //触发分页后的回调
						if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr  一定要加此判断，否则初始时会无限刷新
							getUserList(obj.curr);
						}
					}
				});

			}
		});
	}
	getUserList();//调用,运行

	$("#findUser").on('click', function() {
		getUserList();
	});

	//添加用户事件
	$("#addUser").on('click', function() {
		layer.open({ //弹出层
			type : 2,
			title : '添加用户',
			fix : false,
			maxmin : true,
			shadeClose : true,
			area : [ '1100px', '600px' ],
			content : 'user_add.html',//弹出层页面html内容，因为只是静态页面，单纯的添加数据
			end : function() {
				getUserList();//当添加成功后，刷新一下页面  即调用getUserList这个函数（方法）
			}
		});

	});
	//编辑事件
	//点击修改按钮，触发editEvent事件id==item.userId,然后通过content跳转判断,完成事件,end:调研getUserList()方法，运行，刷新页面
	var editEvent = function(id) {
		layer.open({
			type : 2,
			title : '编辑用户',
			fix : false,
			maxmin : true,
			shadeClose : true,
			area : [ '1100px', '600px' ],
			content : '/user/edituser?userId=' + id,
			end : function() {
				getUserList();
			}
		});
	}

	//删除事件
	//点击删除按钮，触发delEvent事件,
	var delEvent = function(id) {
		//询问框        
		layer.confirm('您确定要删除么？', {
			btn : [ 'OK', 'NO' ]
		//按钮
		}, function() {
			//是
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/user/del",
				data : {//页面的传输数据，向服务器端传的参数
					userId : id
				},
				success : function(msg) {
					getUserList();
					layer.msg('已经成功删除记录' + id, {
						icon : 1
					});//消息框显示删除数据对应的id  {icon:10} 图标的样式
				}
			});

		}, function() {
			//否
		});
	}
</script>
</body>
</html>